<template>
    <div class="tableModel">
        <div class="header">
            <span>维修部门管理</span>
            <div>
                <el-button type="primary" @click="addRepairDepart" plain>新增维修部门</el-button>
            </div>
        </div>
        <div class="tableBody">
            <el-row :gutter="20" v-for="(item,index) in tableData" :key='index'>
                <el-col :span="6">
                    <el-button @click="upDepartmentName(item)" :class="index==0?'btn1':'btn2'" :disabled='index==0' plain style="margin-right:10px">修改名字</el-button>
                    <el-input  :disabled='index==0' v-model="item.r_name" ></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button :class="index==0?'btn1':'btn2'"  @click="bindClass(item,false)" :disabled='index==0' plain>绑定资产分类</el-button>
                    <el-button @click="bindClass(item,true)" class="btn1" plain>{{index==0?'全部分类':'查看'}}</el-button>
                </el-col>
                <el-col :span="10">
                    <div class="content"  :ref="`cell${index}`">
                        <el-button type="primary" class="btn2" @click="addPresons(item)" plain>绑定维修管理员</el-button>
                        <el-button type="primary" v-if="index==0" class="btn1" plain>默认当前仓库管理员</el-button>
                        <el-tag v-for="(tag,idx) in item.repair_admin" style="margin-left:5px" @close="removePresons(tag,item.id)"  :key="idx" closable type="info"> {{tag.admin_name}} </el-tag>
                    </div>
                   <el-popover  placement="top"  width="400"   trigger="hover">
                        <el-tag v-for="(ele,idx) in item.repair_admin" @close="removePresons(ele,item.id)" :key="idx" type="info" closable style="width:66px;text-align:center;margin:10px;display:inline-block">{{ele.admin_name}} </el-tag>
                        <el-button style="width:30px" slot="reference" v-show="item.show&&item.repair_admin.length>1" type="text" >更多</el-button>
                    </el-popover>
                </el-col>
                 <el-col :span="2">
                    <el-button type="text" @click="deleteDepartment(item)" :disabled='item.r_is_default==1'>删除</el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 资产选择 -->
        <class-tree ref="classTree"  :wh_id='$store.state.warehouseOfAssetsManager'  :checkedKeys='checkedKeys' @bindAsstesType='bindAsstesType'/>
    </div>
</template>

<script>
/* eslint-disable */ 
import {complexPicker} from "@/libs/utils" /**封装选部门方法 */
import {getCategoriesApi } from "@/api" 
    /** 维修部门列表        创建维修部门   修改维修部门名称    获取绑定的分类  绑定分类  绑定成员    移除管理员  删除部门 */
import {getAssetRepairList,addAssetRepair,modifyAssetRepair,getCate,      bindClass,bindAdmin,removeAdmin,removeRepairDept,} from '../api'
import classTree from "@/components/classTree"
export default {
    name:"treeModel",
    components:{classTree},
    data(){
        return {
            tableData:[],
            /**资产类别树默认选中 */
            checkedKeys: [],
            /**资产类别树数据 */
            menuItems: [],
            deptId:'',
          
        }
    },
    created(){
        this.getData()
    },
    mounted(){
        let that  = this
        window.addEventListener('resize', function() {
            that.showMore(that.tableData)
        })
    },
    methods:{
        /**维修部门绑定资产类别 */
        bindAsstesType(category){
            let cids = category&&category.length?category.join(','):''
            bindClass({id:this.deptId,wh_id:this.$store.state.warehouseOfAssetsManager,cids }).then(res=>{
                this.$refs.classTree.dialogIsShow = false
            })
        },
        /**如果权限或绑定人员不止显示一行，则显示更多 */
        showMore(val){
            this.tableData = val
            this.$nextTick(()=>{
                if(val&&val.length){
                    val.forEach((element,index) => {
                        element.show = this.$refs[`cell${index}`][0].scrollHeight>90?true:false
                    });
                }
            })
            this.tableData = val
        },
        /**点击显示分类弹窗 */
        bindClass(data,show){
            this.deptId = data.id
            getCate({id:data.id,wh_id:this.$store.state.warehouseOfAssetsManager}).then(res=>{
                this.checkedKeys = res
                this.$refs.classTree.dialogIsShow = true
                this.$refs.classTree.isdisable = show
            })
        },
         /**获取维修部门列表 */
        getData(){
            this.checkedKeys = []
            getAssetRepairList({ wh_id:this.$store.state.warehouseOfAssetsManager}).then(res=>{
                res.forEach(item=>{
                    item.show = true
                })
                this.tableData = res
                this.showMore(res)
                // this.tableData =res
            });
        },
        /**添加维修人员 */
        addPresons(data){
            let that = this
            let arr = data.repair_admin&&data.repair_admin.length?data.repair_admin.map(item=>{return item.admin_userid}):[]
            complexPicker(this,{bool:true,useridArr:[],maxUsers:1,disabledUsers:arr},function (res) {
                log(res)
                bindAdmin({users:JSON.stringify(res.users),id:data.id}).then(res=>{
                    that.getData()
                })
            })
        },
        /**修改维修部门名称 */
        upDepartmentName(data){
            modifyAssetRepair({id:data.id,r_name:data.r_name}).then(res=>{
                 this.getData();
            })
        },
        /**移除维修部门 */
        deleteDepartment(data){
            this.$confirm(`即将删除"${data.r_name}", 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeRepairDept({id:data.id}).then(res=>{
                     this.getData()
                });
            });
        },
        /**移除部门人员 */
        removePresons(data,id){
            this.$confirm(`即将删除"${data.admin_name}", 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeAdmin({admin_userid:data.admin_userid,id}).then(res=>{
                    this.getData();
                })
            });
        },
        /**新增维修部门 */
        addRepairDepart(){
            addAssetRepair({wh_id:this.$store.state.warehouseOfAssetsManager}).then(res=>{
                this.getData();
            })
        }
    },
}
</script>

<style lang='stylus' >
.tableModel
    padding 40px
    background-color #fff
    .header
        line-height 50px;
        background-color: rgba(247, 245, 251, 1);
        padding 0 27px 0 20px 
        display flex
        justify-content space-between
        >span 
            color: rgba(25, 31, 37, 1);
            font-size: 16px;
    .tableBody
        .btn1
            color: rgba(16, 16, 16, 1);
            border: 1px solid rgba(215, 215, 215, 1);
        .btn2
            color: rgba(49, 150, 250, 1);
            border: 1px solid rgba(49, 150, 250, 1);
</style>
<style lang="stylus">
.tableModel
    .tableBody
        .el-col-10
            height 50px
            display flex
            align-items center
            justify-content space-between
            line-height 50px
        .el-input
            width: 150px;
            height: 30px;
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 0);
            color: rgba(16, 16, 16, 1);
            font-size: 12px;
            font-family: Roboto;
        .el-row
            height  50px
            padding 0 20px 0 22px 
            overflow hidden
            border: 1px solid rgba(242, 242, 242, 1);
            border-top none
            margin 0 !important
        .el-row:nth-of-type(2n)
            background-color rgb(251,251,253)
        .el-tag.el-tag--info
            height: 30px;
            line-height: 30px;
            border-radius: 3px;
            background-color: rgba(240, 242, 246, 1);
            color: rgba(106, 106, 106, 1);
            font-size: 10px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0);
            margin 10px 0 10px 10px
        .content
            flex 1
            display flex
            height 50px
            flex-wrap wrap 
        .el-button
            line-height: 30px;
            height 30px
            border-radius: 3px;
            padding 0 8px
            background-color: rgba(255, 255, 255, 0);
            font-size: 12px;
            text-align: center;
            font-family: Roboto;
            margin 10px 0 10px 10px
        .el-button.is-disabled
            color: rgba(170, 170, 170, 1);
            border 1px solid rgba(170, 170, 170, 1);
        
</style>
